@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .container-custom {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }
}

/* 自定义滚动条样式 */
@layer utilities {
    /* 整个滚动条 */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        @apply bg-gray-100 dark:bg-gray-800;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        @apply bg-gray-300 dark:bg-gray-600 rounded-full;
    }

    /* 鼠标悬停在滑块上 */
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-400 dark:bg-gray-500;
    }

    /* 滚动条角落 */
    ::-webkit-scrollbar-corner {
        @apply bg-transparent;
    }
}

/* Firefox滚动条样式 */
* {
    scrollbar-width: thin;
    scrollbar-color: theme("colors.gray.300") theme("colors.gray.100");
}

.dark * {
    scrollbar-color: theme("colors.gray.600") theme("colors.gray.800");
}
